import React, { memo, useState, useEffect } from "react";
import {
  View,
  Text,
  StyleSheet,
  ImageBackground,
  Image,
  Animated,
  TouchableOpacity,
  Modal,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
import { LinearGradient } from "expo-linear-gradient";
import themeStore from "stores/theme";
import YText from "components/YText";
import YButton from "components/YButton";
import commonStyle from "utils/style";
import { AntDesign } from "@expo/vector-icons";
import { p } from "utils/pxToDp";

const Login = (props:any) => {
  const theme = themeStore.theme;
  return (
    <LinearGradient
      colors={["#D884FE", "#CD7CFE", "#B86FFB", "#9F5EFA"]}
      locations={[0, 0.1, 0.4, 0.7]}
      style={{ flex: 1 }}
    >
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.imgbox}>
          <Image source={require("assets/love.png")} style={styles.loveicon} />
        </View>
        <View style={styles.btn}>
          <YButton
            onPress={()=>{
                props.navigation.push('Main')
            }}
            style={[
              {
                width: p(400),
                height: p(80),
              },
              styles.ytbn,
            ]}
          >
            <View style={[commonStyle.flexrowaligncenter, { flex: 1 }]}>
              <AntDesign name="wechat" size={20} color="white" />
              <YText
                color={theme.btnColor}
                size={theme.f30}
                style={{ marginLeft: p(10) }}
              >
                微信登录
              </YText>
            </View>
          </YButton>
        </View>
      </SafeAreaView>
    </LinearGradient>
  );
};

const styles = StyleSheet.create({
  btn: {
    position: "absolute",
    zIndex: 2,
    bottom: p(200),
    left: 0,
    right: 0,
  },
  ytbn: {
    shadowColor: "#ffffff",
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0.1,
    shadowRadius: p(5),
    elevation: p(5),
  },
  imgbox: {
    flexDirection: "row",
    justifyContent: "center",
    marginTop: p(200),
  },
  loveicon: {
    width: p(368),
    height: p(368),
  },
});

export default Login;
